import ThemeHeaderRCM from "@/components/theme-header-rcm";
import React, { memo, useRef } from "react";
import PropTypes from "prop-types";
import { NewAlbumWrapper } from "./style";
import AlbumCover from "@/components/album-cover";
import { LeftOutlined, RightOutlined } from "@ant-design/icons";
import { Carousel } from "antd";

const NewAlbum = memo((props) => {
  const pageRef = useRef()
  const { newAlbums } = props;
  return (
    <NewAlbumWrapper>
      <ThemeHeaderRCM title="新碟上架" />
      <div className="albumLists">
        <div
          className="left ShunCursor"
          onClick={(e) => pageRef.current.prev()}
        >
          <LeftOutlined />
        </div>
        <div className="content">
          <Carousel dots={false} ref={pageRef}>
            {[0, 1].map((item, index) => {
              return (
                <div key={item} className="page">
                  {newAlbums
                    .slice(item * 5, (item + 1) * 5)
                    .map((iten, indey) => {
                      return <AlbumCover item={iten} key={iten.id} />;
                    })}
                </div>
              );
            })}
          </Carousel>
        </div>
        <div
          className="right ShunCursor"
          onClick={(e) => pageRef.current.next()}
        >
          <RightOutlined />
        </div>
      </div>
    </NewAlbumWrapper>
  );
});

NewAlbum.propTypes = {
  newAlbums: PropTypes.array,
};
NewAlbum.defaultProps = {
  newAlbums: [],
};

export default NewAlbum;
